import React, { useRef, useState } from 'react'
import { Button, message, Image, Input } from 'antd'
import { FileAddFilled } from '@ant-design/icons'
import { addBannerFn } from '../../api/banner'

export default function Add() {

    const inpRef = useRef()

    const [imgSrc,setImgSrc] = useState('https://n1image.hjfile.cn/qa/2022/01/11/0e32895681920dcd1098de385517cc07.gif')
    const [alt,setAlt] = useState('')
    const [link,setLink] = useState('')
    function changeFile(file){ 
        // console.log(file)
        if(file.type.indexOf('image') == -1){
            // 不是图片
            message.error('请选择图片')
            return
        }

        // 图片显示有两种方法
        // 1. 创建一个 URL 地址
        // setImgSrc(URL.createObjectURL(file))

        // 2. 通过 base64
        const reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = () => {
            setImgSrc(reader.result)
        }
    }
  

    // 提交轮播图
    function onSubmitClick(){
        console.log(imgSrc,alt,link);
        addBannerFn({img:imgSrc,alt,link})
            .then(res=>{
                message.success('添加成功')
                setImgSrc('https://n1image.hjfile.cn/qa/2022/01/11/0e32895681920dcd1098de385517cc07.gif')
                setAlt('')
                setLink('')
            })
        
    }

    return (
        <div>
            <input hidden ref={inpRef} type="file"
                onChange={(e)=>{ changeFile(e.target.files[0])}}
            />
            <Button icon={<FileAddFilled />} onClick={()=>{
                inpRef.current.click()
            }}>选择文件</Button>

            <Image width={200} src={imgSrc}></Image>

            <br />
            <Input value={alt} onChange={e => setAlt(e.target.value)} placeholder='请输入 alt'></Input>
            <Input value={link} onChange={e => setLink(e.target.value)} placeholder='请输入 link'></Input>
            <Button onClick={()=>{
               onSubmitClick()
            }}>提交</Button>
        </div>
    )
}
